<template>
  <el-dialog
    :title="headTitle"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="title-container">
        <div class="title">{{ formatNumber(accountAmount) }}</div>
        <div class="value">{{ getInfoData.fAccountTag.name }}</div>
      </div>
      <div class="dialog-list">
        <label require="true">选择时间点:</label>
        <div class="span">
          <el-date-picker
            v-model="time"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="23:59:59"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">查询</el-button>
      <el-button @click="(dialogVisible = false), updateKey()">取 消</el-button>
    </span> -->
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  props: {
    treeData: {},
  },
  data() {
    return {
      headTitle: "历史余额查询",
      dialogVisible: false,
      dateRange: "",
      formData: {
        name: "",
        code: "",
        status: "1",
        accountAmount: "",
        infos: "",
        belongCompany: "",
      },
      value: "",
      pData: {},
      levelOneDeptList: [],
      isShow: true,
      time: "",
      getInfoData: {
        fAccountTag: {},
      },
      selectData: {},
      accountAmount: "",
    };
  },
  watch: {
    time: {
      handler(val) {
        this.getHistory();
      },
      // immediate: true,
    },
  },
  methods: {
    getHistory() {
      request({
        url: "/system/accountTag/histroyAmount",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          fundAccountId: this.selectData.id,
          date: this.time.slice(0, 10),
        }),
      }).then((res) => {
        this.accountAmount = res.data || 0;
      });
    },
    save() {},

    open(data, val) {
      this.getInfoData = data;
      this.selectData = val;
      this.accountAmount = data.fAccountTag.accountAmount;
      console.log(data, val);
      this.dialogVisible = true;
    },
    /*
     * 功能：按千位逗号分割
     * 参数：s，需要格式化的数值.
     * 参数：type,判断格式化后是否需要小数位.
     * 返回：返回格式化后的数值字符串.
     */
    formatNumber(num) {
      if (!num) {
        return "￥" + "0.00";
      }
      let str = String(num).split(".");
      let num1 = str[0];
      let num2 = `${str[1]}`;
      if (str[1]) {
        let data = `${str[1]}`;
        if (data.length > 2) {
          data = data.slice(0, 2);
        }
        if (data.length === 1) {
          data = `${data}0`;
        }
        num2 = `.${data}`;
      } else {
        num2 = ".00";
      }
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      return "￥" + (num1 + "").replace(reg, "$&,") + `${num2}`;
    },
    updateKey() {
      this.$emit("update:keyIndex", new Date().getTime());
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.updateKey();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;

    .title-container {
      width: 100%;

      .title {
        width: 100%;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
      }

      .value {
        margin-top: 10px;
        width: 100%;
        text-align: center;
      }
    }

    &-list {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;

      label {
        width: 140px;
        padding: 0 10px;
        text-align: left;
      }

      label[require="true"]::before {
        content: "*";
        color: red;
      }

      .span {
        width: calc(100% - 100px);
        height: 100%;
        display: flex;
        align-items: center;

        .el-select,
        .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
